<template>
  <div class="link manager">
    <div class="search">
      <el-form ref="searchRef" :model="searchParams" label-width="80px" :inline="true" v-show="showSearch">
        <template v-for="(x, y) in searchColumns" :key="y">
          <el-form-item :label="x.title" :prop="x.name">
            <el-input v-model="searchParams[x.name]" :placeholder="'请输入' + x.title" />
          </el-form-item>
        </template>
      </el-form>
    </div>
    <div class="btn">
      <div>
        <el-button @click="handleAdd" type="primary">新增</el-button>
        <el-button @click="batchExcel" type="success">批量</el-button>
        <el-button>导入</el-button>
        <el-button type="warning">导出</el-button>
      </div>
      <div>
        <el-button @click="searchBtn">{{ showSearch ? '隐藏' : '显示' }}搜素</el-button>
        <el-button @click="handleSearch" type="primary">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" width="60" label="顺序" align="center" />
        <el-table-column v-for="(x, y) in searchColumns" :prop="x.name" :label="x.title"
          :width="x.width ? x.width : '180'" align="center" />
        <el-table-column prop="createTime" label="创建时间" width="180" align="center">
          <template #default="scope">
            {{ global.formatDataTime(scope.row.creatTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="action" label="操作" width="230" align="center">
          <template #default="scope">
            <el-button @click="handleDetail(scope.row)">查看</el-button>
            <el-button @click="handleEdit(scope.row)">编辑</el-button>
            <el-button @click="handleDelete(scope.row)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination v-model:current-page="queryParams.page" v-model:page-size="queryParams.show"
        :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next" :total="total" background
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <div class="dialog">
      <el-dialog :title="title" v-model="open" width="800px">
        <el-form ref="formRef" :model="form" size="default" label-width="150px">
          <el-form-item v-for="(x, y) in searchColumns" :key="y" :label="x.title" :prop="x.name">
            <!-- <template v-if="x.name == 'color'">
              <el-input v-model="form.color" :placeholder="'请输入' + x.title" style="width: 150px;margin-right: 10px;" />
              <input type="color" v-model="form.color" />
            </template> -->
            <el-input v-model="form[x.name]" :placeholder="'请输入' + x.title" @keyup.enter="submit" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="display: flex;justify-content: right;">
          <div>
            <el-button type="primary" @click="submit">保 存</el-button>
            <el-button @click="() => { open = false }">取 消</el-button>
          </div>
        </div>
      </el-dialog>
      <div class="dialog">
        <el-dialog :title="title" v-model="openDetail" width="800px">
          <div class="detail">
            <div v-for="x in searchColumns" class="detail-item">
              <div>{{ x.title }}</div>
              <div>{{ detail[x.name] }}</div>
            </div>
            <div class="detail-item">
              <div>创建时间</div>
              <div>{{ global.formatDataTime(detail.createTime) }}</div>
            </div>
            <div class="detail-item">
              <div>更新时间</div>
              <div><span v-if="detail.updateTime">{{ global.formatDataTime(detail.updateTime) }}</span></div>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script setup>
import { linkApi } from '@/apis/link';
import { onMounted, ref, reactive } from 'vue';
import { get, post } from '@/utils/request'
import { global } from '@/utils/global';
import element from '@/utils/element';
const option = {
  name: 'links',
  title: '链接'
}
const tableData = ref([])
const searchColumns = ref([
  {
    name: 'name',
    title: '名称',
    width: 100
  },
  {
    name: 'parentId',
    title: '父级',
    width: 100
  },
  {
    name: 'address',
    title: '地址',
    width: 300
  },
  {
    name: 'comment',
    title: '说明',
    width: 300
  }
])
const searchParams = ref([])
const form = ref({})
const total = ref(0)
const title = ref('')
const showSearch = ref(false)
const searchRef = ref(null)
const open = ref(false)
const detail = ref(null)
const openDetail = ref(false)
const queryParams = reactive({
  page: 1,
  show: 10
})
onMounted(() => {

})

function handleCurrentChange(page) {
  queryParams.page = page
  getList()
}

function handleSizeChange(size) {
  queryParams.show = size
  handleCurrentChange(1)
}

function submit() {
  const params = {}
  searchColumns.value.map(x => {
    params[x.name] = form.value[x.name]
  })
  if (form.value.id) {
    params.id = form.value.id
    editFn(params)
  } else {
    addFn(params)
  }
}

function editFn(data) {
  post(`/${option.name}/edit`, data).then(res => {
    if (res.code == 200) {
      successFn('编辑')
    } else {
      failFn(res)
    }
  })
}

function addFn() {
  post(`/${option.name}/add`, data).then(res => {
    if (res.code == 200) {
      successFn('添加')
    } else {
      failFn(res)
    }
  })
}

function successFn(str) {
  handleSearch()
  open.value = false
  element.success(str + '成功')
}

function failFn(str) {
  element.error(str + '失败')
}

function handleSearch() {
  handleCurrentChange(1)
}

function searchBtn() {
  showSearch.value = !showSearch.value
}

function resetSearch() {
  searchRef.value.resetFields()
  getList()
}

function getList() {
  linkApi.list({ ...searchParams.value, ...queryParams }).then(res => {
    tableData.value = res.data
    total.value = res.count
  })
}

function batchExcel() { }
onMounted(() => {
  getList()
})

function handleDetail(row) {
  title.value = `${option.title}详情`
  openDetail.value = true
  detail.value = row
}

function handleAdd() {
  title.value = `添加${option.title}`
  open.value = true
}

function handleEdit(row) {
  title.value = `编辑${option.title}`
  open.value = true
  form.value = row
}
</script>
<style scoped lang="scss">
.manager {
  >div {
    margin-top: 10px;
  }

  .btn {
    display: flex;
    justify-content: space-between;
  }

  .page {
    display: flex;
    justify-content: right;
  }

  .detail {
    display: flex;
    flex-wrap: wrap;

    .detail-item {
      width: 50%;
      display: flex;

      >div {
        height: 30px;
        line-height: 30px;
      }

      >div:first-child {
        width: 100px;
        text-align: center;
      }

      >div:last-child {
        width: calc(100% - 100px);
        text-align: center;
      }
    }
  }
}
</style>
